<template>
	<view>
		<view class="attr">
			<view class="border-outer">
				<view class="border-inner">
					<image :src="photo" mode="widthFix" class="photo"></image>
				</view>
			</view>
			<view class="list">
				<view class="item" @tap="editNickName">
					<view class="key">昵称</view>
					<view class="value">{{ nickName }}</view>
				</view>
				<view class="item" @tap="editName">
					<view class="key">姓名</view>
					<view class="value">{{ name }}</view>
				</view>
				<view class="item">
					<view class="key">性别</view>
					<picker :value="genderIndex" :range="genderArray" @change="genderChange">{{ genderArray[genderIndex] }}</picker>
				</view>
				<view class="item" @tap="editTel">
					<view class="key">电话</view>
					<view class="value">{{ tel }}</view>
				</view>
				<view class="item" @tap="editEmail">
					<view class="key">邮箱</view>
					<view class="value">{{ email }}</view>
				</view>
				<view class="item">
					<view class="key">入职时间</view>
					<view class="value">{{ hiredate }}</view>
				</view>
				<view class="item">
					<view class="key">所属部门</view>
					<view class="value">{{ deptName }}</view>
				</view>
			</view>
			<button class="btn" @tap="save">保存</button>
		</view>
		<uni-popup ref="popupNickName" type="dialog">
			<uni-popup-dialog mode="input" title="编辑文字内容" placeholder="输入昵称" :value="nickName" @confirm="finishNickName"></uni-popup-dialog>
		</uni-popup>
		<uni-popup ref="popupName" type="dialog">
			<uni-popup-dialog mode="input" title="编辑文字内容" placeholder="输入姓名" :value="name" @confirm="finishName"></uni-popup-dialog>
		</uni-popup>
		<uni-popup ref="popupTel" type="dialog">
			<uni-popup-dialog mode="input" title="编辑文字内容" placeholder="输入电话" :value="tel" @confirm="finishTel"></uni-popup-dialog>
		</uni-popup>
		<uni-popup ref="popupEmail" type="dialog">
			<uni-popup-dialog mode="input" title="编辑文字内容" placeholder="输入邮箱" :value="email" @confirm="finishEmail"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue';
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue';
	export default {
		components: {
			uniPopup,
			uniPopupMessage,
			uniPopupDialog
		},
		data() {
			return {
				nickName: "",
				photo: "",
				name: "",
				genderArray: ['男', '女'],
				genderIndex: 0,
				tel: "",
				email: "",
				hiredate: "",
				deptName: ""
			}
		},
		onShow() {
			let that = this
			that.ajax(that.url.searchUserInfo, "GET", null, function(resp) {
				let result = resp.data.result
				that.photo = result.photo;
				that.nickName = result.nickname;
				that.name = result.name;
				that.tel = result.tel;
				that.email = result.email;
				that.genderIndex = result.sex == "男" ? 0 : 1;
				that.hiredate = result.hiredate;
				that.deptName = result.deptname;
			})
		},
		methods: {
			genderChange: function(e) {
				this.genderIndex = e.detail.value
			},
			editNickName: function() {
				this.$refs.popupNickName.open()
			},
			editName: function() {
				this.$refs.popupName.open()
			},
			finishNickName: function(done, value) {
				if(value != null && value != ""){
					this.nickName = value
					done()
				} else {
					uni.showToast({
						icon: "none",
						title: "昵称不能为空"
					})
				}
			},
			finishName: function(done, value) {
				if(value != null && value != ""){
					this.name = value
					done()
				} else {
					uni.showToast({
						icon: "none",
						title: "姓名不能为空"
					})
				}
			},
			editTel: function() {
				this.$refs.popupTel.open()
			},
			finishTel: function(done, value) {
				if(value != null && value != ""){
					if(this.checkValidTel(value, "电话")) {
						uni.showToast({
							icon: "none",
							title: "电话号码格式不对,请重新输入"
						})
					}
					else{
						this.tel = value
						done()
					}
				} else {
					uni.showToast({
						icon: "none",
						title: "电话号码不能为空"
					})
				}
			},
			editEmail: function() {
				this.$refs.popupEmail.open()
			},
			finishEmail: function(done, value) {
				let email = this.email
				let that = this
				if(value != null && value != ""){
					if(this.checkValidEmail(value, "邮箱")) {
						uni.showToast({
							icon: "none",
							title: "邮箱格式错误,请重新输入"
						})
					}else{
						that.email = value
						done()
					}
				} else {
					uni.showToast({
						icon: "none",
						title: "邮箱不能为空"
					})
				}
			},
			checkValidTel: function(tel){
				let reg = /^1(?:3\d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8\d|9\d)\d{8}$/
				return !reg.test(tel);
			},
			checkValidEmail: function(email){
				let reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
				return !reg.test(email);
			},
			save: function() {
				let that = this
				let data = {
					nickname: that.nickName,
					name: that.name,
					sex: (Number(that.genderIndex) + 1).toString(),
					tel: that.tel,
					email: that.email
				}
				that.ajax(that.url.updateUserInfo, "POST", data, function(resp) {
					console.log(data.sex)
					uni.showToast({
						icon: "success",
						title: "保存成功",
						complete: function() {
							setTimeout(function() {
								uni.navigateBack({
									
								})
							}, 2000)
						}
					})
				})
			},
		}
	}
</script>

<style lang="less">
	@import url("myInfo.less");
</style>